// 平台参数
<template>
  <div class="container card">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="平台参数" name="first">
        <el-row type="flex" class="row-bg" justify="space-between">
          <el-col :span="10">
            <el-card>
              <div slot="header">平台参数</div>
              <div>
                <el-form
                  ref="form"
                  :model="form"
                  label-position="left"
                  label-width="80px"
                >
                  <el-form-item label="工厂名称">
                    {{ form.factory_name }}
                  </el-form-item>
                  <el-form-item label="平台名称">
                    {{ form.platform_name }}
                  </el-form-item>
                  <el-form-item label="IP"> {{ form.ip }} </el-form-item>
                  <el-form-item label="端口"> {{ form.port }} </el-form-item>
                </el-form>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card>
              <div slot="header">平台图标</div>
              <div>
                <el-form
                  ref="form"
                  :model="form"
                  label-position="left"
                  label-width="80px"
                >
                  <el-form-item label="平台logo">
                    <img width="250px" :src="form.factory_logo" alt="" />
                  </el-form-item>
                  <el-form-item label="平台icon">
                    <img width="250px" :src="form.factory_icon" alt="" />
                  </el-form-item>
                </el-form>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <div>
              <el-button
                type="primary"
                icon="el-icon-edit"
                style="float: right"
                circle
                @click="toedit()"
              />
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="分析参数" name="second">
        <el-row type="flex" class="row-bg" justify="space-between">
          <el-col :span="11">
            <el-card>
              <div slot="header">生产规模</div>
              <div>
                <el-form
                  ref="form"
                  :model="form"
                  label-position="left"
                  label-width=""
                >
                  <el-form-item label="全景图">
                    <img width="700px" :src="form.panorama" alt="" />
                  </el-form-item>
                </el-form>
              </div>
            </el-card>
          </el-col>
          <el-col :span="10">
            <el-card>
              <div slot="header">产品中心</div>
              <div>
                <el-form
                  ref="form"
                  :model="form"
                  label-position="left"
                  label-width=""
                >
                  <el-form-item label="普通功率石墨电极">
                    <img width="150px" :src="form.common_power" alt="" />
                  </el-form-item>
                  <el-form-item label="高功率石墨电极">
                    <img width="150px" :src="form.high_power" alt="" />
                  </el-form-item>
                  <el-form-item label="超高功率石墨电极">
                    <img width="150px" :src="form.ultra_high_power" alt="" />
                  </el-form-item>
                  <el-form-item label="石墨粉&石墨块">
                    <img width="150px" :src="form.toner" alt="" />
                  </el-form-item>
                </el-form>
              </div>
            </el-card>
          </el-col>
          <el-col :span="2">
            <div>
              <el-button
                type="primary"
                icon="el-icon-edit"
                style="float: right"
                circle
                @click="Toedit(1)"
              />
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { showplatform } from '@/api/platform.js'
export default {
  components: {},
  props: {},
  data () {
    return {
      activeName: 'first',
      form: {
        factory_name: '',
        platform_name: '',
        ip: '',
        port: '',
        factory_icon: '',
        factory_logo: '',
        panorama: '',
        common_power: '',
        high_power: '',
        ultra_high_power: '',
        toner: ''
      }
    }
  },
  created () {
    this.ShowPlatform()
    // if (this.$route.query.isParameter = 1) {
    //   this.activeName = 'second'
    // }
    this.changetab()
  },
  methods: {
    changetab () {
      // 可以了 api 。。。。
      if (this.$store.state.isParameter) {
        this.activeName = 'second'
      } else {
        this.activeName = 'first'
      }
    },
    toedit () {
      this.$store.commit('changeParameter', false)
      this.$router.push({
        name: 'parameter'
      })
    },
    Toedit () {
      this.$store.commit('changeParameter', true)
      this.$router.push({
        name: 'analysis'
      })
    },
    ShowPlatform () {
      showplatform().then(res => {
        // console.log(res)
        this.form = res.data.data[0]
      })
    }
  }
}
</script>
<style  scoped>
.el-col {
  border-radius: 4px;
}
>>> .el-card__header {
  background: #4d565a;
  color: #fff;
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.el-card >>> .el-card__body {
  padding: 20px;
}
.el-card {
  border-radius: 7px;
  /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important; */
}
</style>
